<template>
  <div id="login">
    <div class="box">
      <div class="img_box">
        <img src="@/assets/logo.png" alt class="imgs">
      </div>
      <div class="form">
        <el-form :label-position="labelPosition" label-width="60px" :model="formLabelAlign">
          <el-form-item label="账号:">
            <el-input v-model="formLabelAlign.username" ></el-input>
          </el-form-item>
          <el-form-item label="密码:">
            <el-input v-model="formLabelAlign.password"  ></el-input>
          </el-form-item>
        </el-form>
        <el-row>
          <el-col :span="24">
            <el-button type="primary" class="btn" @click="login">登录按钮</el-button>.
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    async login() {
      const {data:{data:{token},meta:{msg,status}}} = await this.$http.post("/login", this.formLabelAlign);
      // console.log(token,meta);
      if(status===200){
        this.$message.success(msg)
        window.sessionStorage.setItem('token',token)
        this.$router.push('/home')
      }
    }
  },
  data() {
    return {
      labelPosition: "right",
      formLabelAlign: {
        username: "admin",
        password: "123456"
      }
    };
  }
};
</script>

<style lang=less>
#login {
  height: 100%;
  background: #2b4b6b;
  .box {
    height: 400px;
    width: 400px;
    padding: 50px 50px;
    box-sizing: border-box;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    .img_box {
      height: 150px;
      width: 150px;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, -50%);
      background: #ccc;
      overflow: hidden;
      padding: 10px;
      box-sizing: border-box;
      .imgs {
        height: 100%;
      }
    }
    .form {
      padding-top: 50px;
      box-sizing: border-box;
    }
    .btn {
      width: 100%;
    }
  }
}
</style>
